<template>
    <vol-box :lazy="true" v-model="model" title="选择星辰费用项目" :width="900" :padding="0">
        <div>
            <!-- 搜索配置 -->
            <div style="padding-top: 10px">
                <vol-form :labelWidth="90" ref="formRef" :formFields="formFields" :formRules="formRules">
                </vol-form>
            </div>
            <!-- 表格数据 -->
            <vol-table ref="assistItemRef" rowKey="AssistItemId" :defaultExpandAll="false" :columns="columns"
                :pagination-hide="true" :height="700" :url="url" @loadBefore="loadBefore" @rowClick="rowClick"></vol-table>
        </div>
        <template #footer>
            <el-button type="primary" @click="detailSelectClick" size="small">选择数据</el-button>
        </template>
    </vol-box>
</template>
<script setup>
import VolForm from "@/components/basic/VolForm.vue";
import { ref, reactive, getCurrentInstance, nextTick } from "vue";
const { proxy } = getCurrentInstance()
const assistItemRef = ref()
const model = ref(false)
//调用的接口地址,这里使用的生成页面的接口，也可以参照：组件示例->table组件中自定义配置
const url = ref('api/ImportCostScheme/getAssistItemList')

//是否单选(明细表格选择数据)
const single = ref(false);
const detailRow = ref({})


//表格配置(可以将生成vue文件中columns配置复制过来)
//表格更多配置见:组件示例->voltable表格组件
const columns = ref([
    { field: 'AssistItemId', title: '核算项目标识', type: 'string', hidden: true, width: 120 },
    { field: 'AssistItemNo', title: '费用项目编码', type: 'string', width: 80 },
    { field: 'AssistItemName', title: '费用项目名称', type: 'string', width: 80 },
])

//弹出框打开选择数据
const open = (row) => {
    //明细表表格选择数据传进来的当前行
    detailRow.value = row;
    //如果是明细表表格传进来的按钮，表格设置为单选
    single.value = !!row;
    model.value = true
    //刷新表格的数据
    nextTick(() => {

        assistItemRef.value?.load(row, true)
    })
}
const emit = defineEmits(['onSelectAssistItem'])
//选择数据按钮
const detailSelectClick = () => {
    //回写数据到明细表
    let rows = assistItemRef.value.getSelected()
    if (!rows.length) {
        return proxy.$message.error('请选择数据')
    }

    //如果是明细表表格传进来的按钮,直接给表格行数据设置值
    getAssistItemData(rows)
    //选择数据回调
    model.value = false;
}

const getAssistItemData = (rows) => {
    let expenseItemRangeId = ''
    let expenseItemRange = ''
    rows.forEach(row => {
        expenseItemRangeId = expenseItemRangeId + '/' + row.AssistItemId
        expenseItemRange = expenseItemRange + '/' + row.AssistItemName
    });
    if (detailRow.value) {
        detailRow.value.ExpenseItemRangeId = expenseItemRangeId.trimEnd('/')
        detailRow.value.ExpenseItemRange = expenseItemRange.trimEnd('/')

    } else {
        emit('onSelectAssistItem', rows)
    }

}

//查询点击事件
const search = () => {

    assistItemRef.value.load(null, true)
}
//表数据加载设置查询条件
const loadBefore = (param, callBack) => {
    param.value = detailRow.value.AssistItemId;
    callBack(true)
}

//行点击
const rowClick = ({ row, column, event, index }) => {
    assistItemRef.value.toggleRowSelection(row);
};

const formFields = reactive({
    BillNo: null,
    BillDate: [null, null],
});
const formRules = reactive([
    [
        { title: "订单编号", field: "BillNo", type: "like", colSize: 3 },
        { title: "订单日期", range: true, field: "BillDate", type: "date", colSize: 6 },
    ],
]);


//暴露方法给【选择物料】按钮使用
defineExpose({ open })
</script>
<style lang="less" scoped>
.table-item-header {
    display: flex;
    padding: 6px 0;

    .table-item-buttons {
        margin-left: auto;
    }
}

.small-text {
    font-size: 12px;
    color: #2196f3;
    padding-top: 10px;
    position: relative;
    top: 2px;
}
</style>